<template>
  <el-dialog
    title="設備指令"
    :visible.sync="isOpen"
    :modal-append-to-body="false"
    @close="onSave(false)"
    width="50%">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-input class="border0" placeholder="" v-model="input" readonly>
            <template slot="prepend">設備名稱：{{ assetName }}</template>
          </el-input>
      </el-col>
      <el-col :span="12">
        <el-input class="border0" placeholder="" v-model="input" readonly>
            <template slot="prepend">設備IMEI：{{ asset }}</template>
          </el-input>
      </el-col>
      <el-col :span="12">
        <div class="el-input el-input-group el-input-group--prepend">
          <div class="el-input-group__prepend">指令類型：</div>
          <el-select v-model="optionValue" default-first-option="" placeholder="請選擇" @change="changeOrder">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <div class="order-type">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="關閉震動報警" name="1" v-if="optionValue === '1'">
          <readonly-input title="指令說明" value="關閉震動報警"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="低電報警" name="2" v-if="optionValue === '2'">
          <readonly-input title="上報方式" value="平台"></readonly-input>
          <readonly-input title="指令說明" value="開啟後設備內置電池電壓過低時將會觸發低電報警，且告知用戶。"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="關閉低電提醒" name="1" v-if="optionValue === '2'">
          <readonly-input title="指令說明" value="關閉低電報警"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="拆卸報警設置" name="2" v-if="optionValue === '3'">
          <readonly-input title="上報方式" value="平台"></readonly-input>
          <readonly-input title="指令說明" value="觸發摘除報警後,2分鐘內再觸發無效"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="關閉拆卸報警" name="1" v-if="optionValue === '3'">
          <readonly-input title="指令說明" value="關閉拆卸報警"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="解除拆卸报警" name="3" v-if="optionValue === '13'">
          <readonly-input title="指令說明" value="触发拆卸报警后,2分钟内再触发无效"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="远程开关机" name="1" v-if="optionValue === '4'">
          <div style="text-align: left;">
            <span style="padding: 0 30px 0 15px;">遠程開關機</span>
            <el-radio v-model="radio" label="2">遠程開啟定位</el-radio>
            <el-radio v-model="radio" label="1">遠程關閉定位</el-radio>
          </div>
          <readonly-input title="指令說明" value="远程控制设备开启定位或者关闭定位"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="WIFI定位" name="1" v-if="optionValue === '5'">
          <readonly-input title="指令說明" value="发送成功后地图上显示WIFI定位,如WIfI信号没有被服务收集的地方,无法正常定位"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="短信获取" name="1" v-if="optionValue === '6'">
          <el-input placeholder="" v-model="duanxin">
            <template slot="prepend">接收短信號碼</template>
          </el-input>
          <readonly-input title="指令說明" value="填入接收短信的手机号,并确保设备内的电话支持短信功能,运营商将扣取设备里的电话卡短信费用"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="电话获取" name="2" v-if="optionValue === '6'">
          <el-input placeholder="" v-model="dianhua">
            <template slot="prepend">撥打號碼</template>
          </el-input>
          <readonly-input title="指令說明" value="输入电话后,定位器自动拨打电话获取SIM卡号码"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="立即定位" name="1" v-if="optionValue === '7'">
          <readonly-input title="指令說明" value="指令下发后,马上打开卫星定位,如果在卫星盲区将进行WIFI定位"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="定时定位模式" name="1" v-if="optionValue === '8'">
          <el-input placeholder="單位s" v-model="jiange">
            <template slot="prepend">定位間隔時間</template>
          </el-input>
          <readonly-input title="指令說明" value="定时定位即设备按照固定间隔上传定位（出厂默认：10分钟）"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="防伪基站探测" name="1" v-if="optionValue === '9'">
          <div style="text-align: left;">
            <span style="padding: 0 30px">開/關</span>
            <el-radio v-model="radiofangwei" label="1">關閉</el-radio>
            <el-radio v-model="radiofangwei" label="2">打開</el-radio>
          </div>
          <readonly-input title="指令說明" value="打开防伪基站探测功能后，定位器会自动全部工作在4G频段，2G频段不再工作，在4G信号不好的地区可能会离线。全部工作在4G频段时，定位器功耗会较正常增加2-3倍，工作时长会降低。 默认：关闭"></readonly-input>
        </el-tab-pane>
        <el-tab-pane label="自定义指令" name="1" v-if="optionValue === '10'">
          <el-input placeholder="" v-model="zidingyi">
            <template slot="prepend">自定義指令</template>
          </el-input>
          <readonly-input title="指令說明" value="请输入正确指令格式后发送."></readonly-input>
        </el-tab-pane>
      </el-tabs>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSave(true)">發送指令</el-button>
    </span>
  </el-dialog>
</template>

<script>
import ReadonlyInput from '@/components/common/readonly-input'
export default {
  name: 'order-details',

  components: {
    [ReadonlyInput.name]: ReadonlyInput
  },

  model: {
    props: "value",
    event: "update",
  },

  props: {
    value: {
      default() {
        return false
      },
    },

    asset: {
      default() {
        return ''
      }
    },
    
    assetName: {
      default() {
        return ''
      }
    }
  },

  data() {
    return {
      input: '',
      radio: '2',
      duanxin: '',
      dianhua: '',
      jiange: '',
      radiofangwei: '2',
      zidingyi: '',
      options: [{
        value: '1',
        label: '震動報警'
      }, {
        value: '2',
        label: '低電量報警'
      }, {
        value: '3',
        label: '拆卸報警'
      }, {
        value: '13',
        label: '解除拆卸報警'
      }, {
        value: '4',
        label: '遠程控制'
      }, {
        value: '5',
        label: 'WIFI定位'
      }, {
        value: '6',
        label: '獲取號碼'
      }, {
        value: '7',
        label: '立即定位'
      }, {
        value: '8',
        label: '工作模式'
      }, {
        value: '9',
        label: '防偽基站探測'
      }, {
        value: '10',
        label: '自定義指令'
      }],
      optionValue: '1',
      activeName: '1'
    }
  },

  computed: {
    isOpen: {
      get:function() {
        return this.value
      },
      set:function() {  //调用set方法时需要先执行一下this.fullName = false
        this.$emit('update', false)
      }
    },

    innerType() {
      let res = 1
      switch (this.optionValue) {
        case '1':
          break
        case '2':
          res = this.activeName
          break
        case '3':
          res = this.activeName
          break
        case '13':
          res = 3
          break
        case '4':
          res = this.radio
          break
        case '5':
          res = 2
          break
        case '6':
          res = this.activeName
          break
        case '7':
          res = 1
          break
        case '8':
          res = 1
          break
        case '9':
          res = 1
          break
        case '10':
          res = 1
          break
        default:
          res = 1
      }
      return res
    }
  },

  methods: {
    onSave(flag) {
      if(flag) {
        let param = ''
        if(this.optionValue == '6') {
          param = this.innerType == '1' ? this.duanxin : this.dianhua
        } else if(this.optionValue == '8') {
          param = this.jiange
        } else if(this.optionValue == '10'){
          param = this.zidingyi
        }
        //发送指令
        this.loading = true
        this.$store.dispatch('map/fetchSendIns', { facilityId: this.asset, param: param, type: (this.optionValue === '13' ? '3' : this.optionValue), innerType: this.innerType }).then(res => {
          this.loading = false
          console.log(res)
        }).catch(err => {
          this.loading = false
          this.$message.error(err)
          return false
        })
      }
      this.$emit('update', false)
    },

    changeOrder() {//切換下拉
      if(this.optionValue == 13) {
        this.activeName = '3'
      } else {
        this.activeName = '1'
      }
    },

    handleClick() {
      console.log(this.activeName, '123')
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/them.scss";
/deep/ .el-dialog {
  left: 25%;
  bottom: auto;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid #e5e5e5;
}

/deep/ .el-input-group__prepend {
  border: 0;
  background-color: transparent;
  width: 115px;
}

.el-input {
  margin-bottom: 10px;
}

/deep/ .border0 .el-input__inner {
  border: 0;
}

/deep/ .el-tabs__content {
    display: block !important;
}

.order-type {
  padding-left: 155px;
}
</style>
